<!doctype html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- Apple devices fullscreen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" media="screen" />
    <link href="/public/plugins/layui/css/layui.css?v=v1.6.7" rel="stylesheet" type="text/css">
    <link href="/public/static/admin/css/main.css?v=v1.6.7" rel="stylesheet" type="text/css">
    <link href="/public/static/admin/css/page.css?v=v1.6.7" rel="stylesheet" type="text/css">
    <link href="/public/static/admin/font/css/font-awesome.min.css?v=v1.6.7" rel="stylesheet" />
    <link href="/public/static/admin/font/css/iconfont.css?v=v1.6.7" rel="stylesheet" />
    <!--[if IE 7]>
  <link rel="stylesheet" href="/public/static/admin/font/css/font-awesome-ie7.min.css?v=v1.6.7">
<![endif]-->
    <script type="text/javascript">
        var eyou_basefile = "/login.php";
        var module_name = "admin";
        var GetUploadify_url = "/uploads.html";
         // 插件专用旧版上传图片框
        if ('Weapp@execute' == "Arctype@index") {
            GetUploadify_url = "/uploads.html";
        }
        var __root_dir__ = "";
        var __lang__ = "cn";
        var __seo_pseudo__ = 3;
        var __web_xss_filter__ = 0;
        var __is_mobile__ = 0;
        var __security_ask_open__ = 0;
    </script>
    <link href="/public/static/admin/js/jquery-ui/jquery-ui.min.css?v=v1.6.7" rel="stylesheet" type="text/css" />
    <link href="/public/static/admin/js/perfect-scrollbar.min.css?v=v1.6.7" rel="stylesheet" type="text/css" />
    <!-- <link type="text/css" rel="stylesheet" href="/public/plugins/tags_input/css/jquery.tagsinput.css?v=v1.6.7"> -->
    <style type="text/css">
        html, body {
    overflow: visible;
}
    </style>
    <link href="/public/static/admin/css/diy_style.css?v=v1.6.7" rel="stylesheet" type="text/css" />
    <link href="/public/static/admin/css/theme_style.css?v=v1.6.7_1720001269" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/public/static/common/js/jquery.min.js?t=v1.6.7"></script>
    <!-- <script type="text/javascript" src="/public/plugins/tags_input/js/jquery.tagsinput.js?v=v1.6.7"></script> -->
    <script type="text/javascript" src="/public/static/admin/js/jquery-ui/jquery-ui.min.js?v=v1.6.7"></script>
    <script type="text/javascript" src="/public/plugins/layer-v3.1.0/layer.js?v=v1.6.7"></script>
    <script type="text/javascript" src="/public/static/admin/js/jquery.cookie.js?v=v1.6.7"></script>
    <script type="text/javascript" src="/public/static/admin/js/admin.js?v=v1.6.7"></script>
    <script type="text/javascript" src="/public/static/admin/js/jquery.validation.min.js?v=v1.6.7"></script>
    <script type="text/javascript" src="/public/static/admin/js/common.js?v=v1.6.7"></script>
    <script type="text/javascript" src="/public/static/admin/js/perfect-scrollbar.min.js?v=v1.6.7"></script>
    <script type="text/javascript" src="/public/static/admin/js/jquery.mousewheel.js?v=v1.6.7"></script>
    <script type="text/javascript" src="/public/plugins/layui/layui.js?v=v1.6.7"></script>
    <script type="text/javascript" src="/public/static/common/js/jquery.lazyload.min.js?v=v1.6.7"></script>
    <script src="/public/static/admin/js/myFormValidate.js?v=v1.6.7"></script>
    <script src="/public/static/admin/js/myAjax2.js?v=v1.6.7"></script>
    <script src="/public/static/admin/js/global.js?v=v1.6.7"></script>
    
    
    <link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.min.js"></script>
<script src="js/index.js"></script>
    
    
    
</head>

<body style="background-color: rgb(255, 255, 255); overflow: auto; cursor: default; overflow-y: scroll;">
    <style type="text/css">
        .tb_child {
    background: #FFFFDF;
}
    </style>
    <div class="page arctype" id="app">
        <div class="flexigrid">
            <div class="mDiv">
                <div class="ftitle">
                    <div class="fbutton">
                        <a href="/arctype_adds.html">
                            <div class="add"> <span>
                                    <i class="layui-icon layui-icon-addition"></i>
                                    增加栏目
                                </span>
                            </div>
                        </a>
                    </div>
                    
                </div>
            </div>
            <div class="hDiv">
                <div class="hDivBox">
                    <table cellpadding="0" cellspacing="0" style="width: 100%">
                        <thead>
                            <tr>
                                <th class="sign w40" axis="col0">
                                    <div class="tc">
                                        <input type="checkbox" onClick="javascript:$('input[name*=ids]').prop('checked',this.checked);" autocomplete="off">
                                    </div>
                                </th>
                                <th axis="col3" class="w60">
                                    <div class="sundefined tc">ID</div>
                                </th>
                                <th axis="col3" class="">
                                    <div class="sundefined text-l10">
                                        <img src="/public/static/admin/images/tv-expandable.gif" id="all_treeclicked" title="展开所有子栏目" style="float: none;" data-status="close" onClick="treeClicked(this,'all',0);">栏目名称</div>
                                </th>
                               
                                <th axis="col2" class="w60">
                                    <div class="tc">显示</div>
                                </th>
                                <th axis="col1" class="w300">
                                    <div class="tc">操作</div>
                                </th>
                                <th axis="col2" class="w60">
                                    <div class="tc">排序</div>
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div id="flexigrid" class="bDiv" style="height: auto;">
                <table class="flex-table autoht" cellpadding="0" cellspacing="0" border="0" id="arctype_table" style="width: 100%">
                    <tbody id="treet1">
                        <tr v-for="vlist in list"  nctype="0" :class="'parent_id_'+vlist.parent_id" :data-level="vlist.level" :style="vlist.parent_id==0 ? 'display:black;':'display:none;'" :data-id="vlist.id">
                            <td class="sign">
                                <div class="tc w40">
                                    <input type="checkbox" v-model="ids" name="ids[]" :value="vlist.id" autocomplete="off">
                                </div>
                            </td>
                            <td class="name">
                                <div class="w60 tc">{{vlist.id}}</div>
                            </td>
                            <td class="typename" style="width: 100%">
                                <div>
                                   
                                    
                                    <img src="/public/static/admin/images/tv-expandable.gif" style="float: none;" fieldid="2" status="open" nc_type="flex" :onClick="'treeClicked(this,'+vlist.id+',0);'" class="has_children" :data-level="vlist.level" :data-id="vlist.id"> 
                                    <a href="/login.php?m=admin&c=Arctype&a=single_edit&typeid=1&lang=cn">{{vlist.typename}}</a>
                                </div>
                            </td>
                        
                            <td align="center" class="">
                                <div class="w60 tc"> 
                                <span v-if="vlist.is_hidden==1" class="no" onClick="changeTableVal('arctype','id','1','is_hidden',this);"><i class="fa fa-check-circle"></i>否</span>
                                </div>
                                
                                <span v-if="vlist.is_hidden==0" class="yes" onClick="changeTableVal('arctype','id','1','is_hidden',this);"><i class="fa fa-check-circle"></i>是</span>
                                </div>
                            </td>
                            <td class="operation">
                                <div class="w300 tc pb0"> 
                                    <a href="javascript:;" @click="edit(vlist.id)" class="btn blue">编辑</a>
                                    <i></i>
                                    <a :href="'/arctypeadd.html?pid='+vlist.id" class="btn blue">增加子栏目</a>
                                    <i></i><a class="btn red" href="javascript:;" data-url="" data-id="1" :data-typename="vlist.typename" data-deltype="del" @click="del(vlist.id)">删除</a>
                               
                                   
                                </div>
                            </td>
                            <td class="sort">
                                <div class="w60 tc pb0">
                                    <input type="text" onChange="changeTableVal('arctype','id','1','sort_order',this);" size="4" :value="vlist.sort_order" class="tc" />
                                </div>
                            </td>
                        </tr>
                       
                    </tbody>
                </table>
                <div class="footer-oper"> <span class="ml15">
                <input type="checkbox" class="checkAll" autocomplete="off">
            </span>
                    <div class="nav-dropup">
                        <button class="layui-btn layui-btn-primary"  @click="delall()" data-url="" data-deltype="del">批量删除</button>
                    </div>
                </div>
            </div>
        </div>
        <div id="div_single_uiset_select" style="display: none;">
            <div class="select-show-box"> <a href="pc_url" target="_blank" class="pc" title="可视化编辑"><i class="fa fa-desktop"></i>PC端</a>
                <a href="mobile_url" target="_blank" class="mobile" title="可视化编辑"><i class="fa fa-mobile"></i>手机端</a>
            </div>
        </div>
        <script type="text/javascript">
            $(function() {
                $('input[name*=ids]').click(function() {
                    if ($('input[name*=ids]').length == $('input[name*=ids]:checked').length) {
                        $('.checkAll').prop('checked', 'checked');
                    } else {
                        $('.checkAll').prop('checked', false);
                    }
                });
                $('input[type=checkbox].checkAll').click(function() {
                    $('input[type=checkbox]').prop('checked', this.checked);
                });
                setCookies('admin-treeClicked-Arr', JSON.stringify([]));
            });
            $(document).ready(function() {
                // 表格行点击选中切换
                $('#flexigrid > table>tbody >tr').click(function() {
                    $(this).toggleClass('trSelected');
                });
                // 点击刷新数据
                $('.fa-refresh').click(function() {
                    location.href = location.href;
                });
                // 批量操作
                $(".dropdown-bt").click(function() {
                    $(".dropdown-menus").slideToggle(200);
                    event.stopPropagation();
                })
                $(document).click(function() {
                    $(".dropdown-menus").slideUp(200);
                    event.stopPropagation();
                })
            });

            function shopProductIndex(obj) {
                var shop_open = 0;
                if (1 == shop_open) {
                    top.$('#Shop_home').attr('data-click', true).attr('data-click_url', $(obj).data('url')).click();
                } else {
                    window.location.href = $(obj).data('href');
                }
            }
             // 点击展开 收缩节点
            function treeClicked(obj, id, reload) {
                if (id == 'all') {
                    if (1 == reload) {
                        var status = getCookie('admin-treeClicked');
                        if (!status) {
                            status = $(obj).attr('data-status');
                        }
                    } else {
                        var status = $(obj).attr('data-status');
                    }
                    if (status == 'close') {
                        setCookies('admin-treeClicked-Arr', JSON.stringify([1, 2, 3, 4, 20, 21, 22, 24, 68, 71, 75, 76, 77, 79, 81, 85]));
                        setCookies('admin-treeClicked_All', 1); //1为全部展开,0-为非全部展开
                        $('tr[class^=parent_id_]').show().find('img').attr('src', '/public/static/admin/images/tv-collapsable-last.gif');
                        $(obj).attr('data-status', 'open').attr('title', '关闭所有子栏目').attr('src', '/public/static/admin/images/tv-collapsable-last.gif');
                    } else {
                        setCookies('admin-treeClicked-Arr', '');
                        setCookies('admin-treeClicked_All', 0);
                        $('tr[data-level=0]').find('img.has_children').attr('src', '/public/static/admin/images/tv-collapsable-last.gif').trigger('click');
                        $('tr[class^=parent_id_]').removeClass('trSelected');
                        $(obj).attr('data-status', 'close').attr('title', '展开所有子栏目').attr('src', '/public/static/admin/images/tv-expandable.gif');
                    }
                    setCookies('admin-treeClicked', status);
                    return false;
                }
                var src = $(obj).attr('src');
                if (src == '/public/static/admin/images/tv-expandable.gif') {
                    var str = getCookie('admin-treeClicked-Arr');
                    var arr = [];
                    if ('' == str || null == str || 'null' == str) {
                        arr.push(id);
                    } else {
                        arr = JSON.parse(str);
                        if (!arr.includes(id)) {
                            arr.push(id);
                        }
                    }
                    arr = JSON.stringify(arr);
                    setCookies('admin-treeClicked-Arr', arr);
                    $(".parent_id_" + id).show();
                    $(obj).attr('src', '/public/static/admin/images/tv-collapsable-last.gif');
                    var status = 'close';
                } else {
                    var str = getCookie('admin-treeClicked-Arr');
                    var arr = [];
                    var level = '';
                    var key = -1;
                    if ('' != str) {
                        arr = JSON.parse(str);
                        key = $.inArray(id, arr);
                        if (-1 < key) {
                            arr.splice(key, 1);
                        }
                        level = $(obj).attr('data-level');
                        $(obj).parent().parent().parent().nextAll().each(function() {
                            if ($(this).attr('data-level') > level) {
                                key = $.inArray(parseInt($(this).attr('data-id')), arr);
                                if (-1 < key) {
                                    arr.splice(key, 1);
                                }
                            } else {
                                return false;
                            }
                        });
                        arr = JSON.stringify(arr);
                        setCookies('admin-treeClicked-Arr', arr);
                        setCookies('admin-treeClicked_All', 0);
                    }
                    $(obj).attr('src', '/public/static/admin/images/tv-expandable.gif');
                    var status = 'open';
                    // 如果是点击减号, 遍历循环他下面的所有都关闭
                    var tbl = document.getElementById("arctype_table");
                    var cur_tr = obj.parentNode.parentNode.parentNode;
                    var fnd = false;
                    for (var i = 0; i < tbl.rows.length; i++) {
                        var row = tbl.rows[i];
                        if (row == cur_tr) {
                            fnd = true;
                        } else {
                            if (fnd == true) {
                                var level = parseInt($(row).data('level'));
                                var cur_level = $(cur_tr).data('level');
                                if (level > cur_level) {
                                    $(row).hide();
                                    $(row).find('img.has_children').attr('src', '/public/static/admin/images/tv-expandable.gif');
                                } else {
                                    fnd = false;
                                    break;
                                }
                            }
                        }
                    }
                }
                setCookies('admin-treeClicked', status);
            }

            function delfun(obj) {
                var title = $(obj).attr('data-typename');
                var deltype = $(obj).attr('data-deltype');
                var confirm_title = '确认删除到回收站？子栏目及文档将一起清空至回收站。';
                if ('del' == deltype) {
                    confirm_title = '确认直接删除？子栏目及文档将一起清空。';
                }
                layer.confirm(confirm_title, {
                    area: ['480px', '190px'],
                    move: false,
                    title: '提示',
                    btnAlign: 'r',
                    closeBtn: 3,
                    shade: layer_shade,
                    btn: ['确定', '取消'], //按钮
                    success: function() {
                        $(".layui-layer-content").css('text-align', 'left');
                    }
                }, function() {
                    layer_loading('正在处理');
                    // 确定
                    $.ajax({
                        type: 'post',
                        url: $(obj).attr('data-url'),
                        data: {
                            del_id: $(obj).attr('data-id'),
                            deltype: deltype,
                            _ajax: 1
                        },
                        dataType: 'json',
                        success: function(data) {
                            layer.closeAll();
                            if (data.code == 1) {
                                layer.msg(data.msg, {
                                    icon: 1
                                });
                                window.location.reload();
                                // $('tr[data-id="'+$(obj).attr('data-id')+'"]').remove();
                            } else {
                                layer.alert(data.msg, {
                                    icon: 2,
                                    title: false
                                }); //alert(data);
                            }
                        }
                    })
                }, function(index) {
                    layer.close(index);
                });
                return false;
            }
            /**
             * 批量删除栏目提交
             */
            function batch_del_arctype(obj, name) {
                var a = [];
                $('input[name^=' + name + ']').each(function(i, o) {
                    if ($(o).is(':checked')) {
                        a.push($(o).val());
                    }
                })
                if (a.length == 0) {
                    layer.alert('请至少选择一项', {
                        shade: layer_shade,
                        area: ['480px', '190px'],
                        move: false,
                        title: '提示',
                        btnAlign: 'r',
                        closeBtn: 3,
                        success: function() {
                            $(".layui-layer-content").css('text-align', 'left');
                        }
                    });
                    return;
                }
                var deltype = $(obj).attr('data-deltype');
                var confirm_title = '确认删除到回收站？如有子栏目及文档将一起清空。';
                if ('del' == deltype) {
                    confirm_title = '确认直接删除？如有子栏目及文档将一起清空。';
                }
                layer.confirm(confirm_title, {
                    area: ['480px', '190px'],
                    move: false,
                    title: '提示',
                    shade: layer_shade,
                    btnAlign: 'r',
                    closeBtn: 3,
                    btn: ['确定', '取消'], //按钮
                    success: function() {
                        $(".layui-layer-content").css('text-align', 'left');
                    }
                }, function() {
                    layer_loading('正在处理');
                    // 确定
                    $.ajax({
                        type: 'post',
                        url: $(obj).attr('data-url'),
                        data: {
                            del_id: a,
                            deltype: deltype,
                            _ajax: 1
                        },
                        dataType: 'json',
                        success: function(res) {
                            layer.closeAll();
                            if (res.code == 1) {
                                showSuccessMsg(res.msg);
                                window.location.reload();
                                // $('tr[data-id="'+$(obj).attr('data-id')+'"]').remove();
                            } else {
                                showErrorAlert(res.msg);
                            }
                        }
                    })
                }, function(index) {
                    layer.close(index);
                });
                return false;
            }

            function single_uiset_select(obj) {
                var url = $(obj).attr('data-href');
                var pc_url = url + '&v=pc';
                var mobile_url = url + '&v=mobile';
                var content = $('#div_single_uiset_select').html();
                content = content.replace('pc_url', pc_url);
                content = content.replace('mobile_url', mobile_url);
                layer.open({
                    type: 1,
                    title: false,
                    shadeClose: false,
                    maxmin: false, //开启最大化最小化按钮
                    area: ['350px', '150px'],
                    content: content
                });
            }
            /* 生成静态页面代码 */
            var typeid = "0";
            var is_del = "0";
            if (typeid > 0) {
                //百度小程序 API 提交 (自动推送)
                push_bdminipro(typeid, 1);
            }
            /* end */
        </script>
        <div id="goTop">
            <a href="JavaScript:void(0);" id="btntop"> <i class="fa fa-angle-up"></i>
            </a>
            <a href="JavaScript:void(0);" id="btnbottom"> <i class="fa fa-angle-down"></i>
            </a>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#think_page_trace_open').css('z-index', 99999);
            });
        </script>
        
        
<script>
    var vm = new Vue({
		el: '#app',
		data: {
			list: [],
			count:0,
			search:"",
			searchstatus:0,
			ids:[]
		},
		created(){
		  //  let url=window.location.search;
		  //  let urlParams = new URLSearchParams(url);
		  //  this.id=urlParams.get("id");
		  //  this.searchtext=urlParams.get("searchtext");
		    this.details();
		},
		mounted(){
		    
		},
		methods: {
		    details: function() {
			    this.$http.get('api/catelist.php').then(function(res){
                    console.log(res.body);   
                    this.list=res.body;
                
                },function(){
                    console.log('请求失败处理');
                });
			},
			delall:function(){
			    this.$http.post('api/catelist.php',{
			        ids:JSON.stringify(this.ids)
			    },{emulateJSON: true}).then(function(res){
			        this.list=res.body;
                    this.count=res.body;
			    },function(){
			        console.log("request fail");
			    })
			},
			del:function(id){
			    this.$http.post('api/arctypedel.php',{
			        id:id
			    },{emulateJSON: true}).then(function(res){
			        let code=res.body.code;
			        if(code==200){
			            alert("success");
			            window.location.href="/cate.html";
			        }
			    },function(){
			        console.log("request fail");
			    })
			},
			edit:function(id){
			    window.location.href="/arctypeedit.html?pid="+id;
			}
		}
	})
</script>    
        
        
</body>

</html>